<template>
  <div class="strategydiv" v-loading="loading">
    <div
      style="
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 16px;
      "
    ></div>
    <el-form
      ref="formObject"
      size="small"
      :model="strategyBaseForm"
      label-position="left"
      label-width="80px"
      :rules="formRules"
      :inline="true"
    >
      <el-form-item label="策略名称" prop="strategyName" style="width: 100%">
        <el-input
          style="width: 270px"
          v-model="strategyBaseForm.strategyName"
          placeholder="请输入策略名称"
          :disabled="operationType == 'check'"
          clearable
        />
      </el-form-item>
      <el-form-item label="客群" prop="customerGroup" style="width: 100%">
        <el-select
          style="width: 270px"
          v-model="strategyBaseForm.customerGroup"
          placeholder="请选择客群"
          class="select_box"
          :disabled="operationType == 'check'"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in customerGroupList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道" prop="strategyChannelCode" style="width: 100%">
        <el-select
          style="width: 270px"
          v-model="strategyBaseForm.strategyChannelCode"
          placeholder="请选择渠道"
          :disabled="operationType == 'check'"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in channelList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构" prop="strategyOrgan" style="width: 100%">
        <span slot="label">
          <span style="color: #ff574c; margin-right: 4px">*</span>
          <span>机构</span>
        </span>
        <el-cascader
          style="width: 270px"
          clearable
          @change="strategyOrganChange"
          :options="organizationList"
          :props="organizationList_props"
          v-model="strategyOrgan"
          :show-all-levels="false"
          placeholder="请选择组织机构"
          :disabled="operationType == 'check'"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="策略描述" prop="strategyDesc" style="width: 100%">
        <el-input
          style="width: 270px"
          type="textarea"
          :rows="3"
          v-model="strategyBaseForm.strategyDesc"
          placeholder="请输入策略描述"
          clearable
          :disabled="operationType == 'check'"
        />
      </el-form-item>
      <el-form-item label="执行频率" style="width: 100%" prop="policyType">
        <el-checkbox-group
          @change="policyTypeChange"
          v-model="strategyBaseForm.policyType"
          style="margin-left: 16px"
          :disabled="operationType == 'check'"
        >
          <el-checkbox
            v-for="(dict, key) in dateSelect9"
            :label="dict.value"
            :key="key"
            >{{ dict.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label=""
        v-if="strategyBaseForm.policyType.includes('1')"
        style="width: 100%"
      >
        <div class="frequency_set_box">
          <div style="font-weight: 600; font-size: 16px">进入时间</div>
          <span style="margin-right: 4px; font-size: 14px">用户在</span>
          <el-date-picker
            value-format="yyyy-MM-dd"
            style="margin-right: 4px; width: 150px"
            v-model="strategyBaseForm.value1"
            type="date"
            placeholder="选择日期时间"
            align="right"
            :disabled="operationType == 'check'"
          >
          </el-date-picker>
          <el-time-picker
            style="margin-right: 4px; width: 100px"
            value-format="HH:mm"
            format="HH:mm"
            v-model="strategyBaseForm.value2"
            :disabled="operationType == 'check'"
          >
          </el-time-picker>
          <span style="font-size: 14px"> 进入流程</span>
        </div>
      </el-form-item>
      <el-form-item
        label=""
        v-if="strategyBaseForm.policyType.includes('2')"
        style="width: 100%"
      >
        <div class="frequency_set_box">
          <div style="font-weight: 600; font-size: 16px">进入时间</div>
          <span
            style="
              margin-right: 3px;

              width: 50px;
              font-size: 14px;
            "
            >用户在</span
          >
          <el-date-picker
            value-format="yyyy-MM-dd"
            style="margin-right: 4px; width: 240px; margin-bottom: 10px"
            v-model="strategyBaseForm.value3"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :disabled="operationType == 'check'"
          >
          </el-date-picker>
          <span style="font-size: 14px"> 期间内,用户</span>
          <el-select
            v-model="strategyBaseForm.value8"
            clearable
            :disabled="operationType == 'check'"
            style="width: 100px; margin-right: 4px"
          >
            <el-option
              v-for="dict in dateSelect2"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          <el-select
            v-show="strategyBaseForm.value8 == '2'"
            v-model="strategyBaseForm.week"
            clearable
            :disabled="operationType == 'check'"
            style="width: 100px; margin-right: 4px"
          >
            <el-option
              v-for="dict in weekList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          <el-select
            v-show="strategyBaseForm.value8 == '3'"
            v-model="strategyBaseForm.month"
            clearable
            :disabled="operationType == 'check'"
            style="width: 100px; margin-right: 4px"
          >
            <el-option
              v-for="dict in monthList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          <el-time-picker
            style="margin-right: 4px; width: 100px"
            value-format="HH:mm"
            format="HH:mm"
            v-model="strategyBaseForm.value9"
            :disabled="operationType == 'check'"
          >
          </el-time-picker>
          <span style="font-size: 14px">进入流程</span>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "strategy",
  props: {
    strategyBaseFormCopy: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      dateSelect: [
        { value: "1", label: "每月" },
        { value: "2", label: "每周" },
        { value: "3", label: "每天" },
      ],
      dateSelect2: [
        { value: "1", label: "每天" },
        { value: "2", label: "每周" },
        { value: "3", label: "每月" },
      ],
      dateSelect3: [
        { value: "1", label: "App推送点击" },
        { value: "2", label: "App激活" },
        { value: "3", label: "App崩溃" },
        { value: "4", label: "APP浏览页面" },
        { value: "5", label: "App点击" },
        { value: "6", label: "App页面浏览" },
        { value: "7", label: "Banner点击" },
      ],
      dateSelect4: [
        { value: "1", label: "总次数" },
        { value: "2", label: "分布" },
      ],
      dateSelect5: [
        { value: "1", label: "=" },
        { value: "2", label: "不等" },
        { value: "3", label: "<" },
        { value: "4", label: "<=" },
        { value: "5", label: ">" },
        { value: "6", label: ">=" },
        { value: "7", label: "区间" },
        { value: "8", label: "TOP N" },
      ],
      dateSelect6: [
        { value: "1", label: "会员等级提升" },
        { value: "2", label: "全端启动" },
        { value: "3", label: "关注微信公众号" },
        { value: "4", label: "分享商品" },
        { value: "5", label: "加入购物车" },
        { value: "6", label: "参与抽奖" },
        { value: "7", label: "参与活动" },
        { value: "8", label: "发起分享" },
        { value: "9", label: "取关微信公众号" },
      ],
      dateSelect7: [
        { value: "1", label: "是否成功" },
        { value: "2", label: "是否登录ID" },
        { value: "3", label: "是否首日访问" },
        { value: "4", label: "是否首次启动" },
        { value: "5", label: "浏览器名，例如C..." },
        { value: "6", label: "浏览器版本，例..." },
        { value: "7", label: "用户进入计划时间" },
      ],
      dateSelect8: [
        { value: "1", label: "有值" },
        { value: "2", label: "没值" },
      ],
      dateSelect9: [
        { value: "1", label: "定时型-单次" },
        { value: "2", label: "定时型-重复" },
        { value: "3", label: "手动型-单次" },
      ],
      weekList: [
        { value: "1", label: "星期一" },
        { value: "2", label: "星期二" },
        { value: "3", label: "星期三" },
        { value: "4", label: "星期四" },
        { value: "5", label: "星期五" },
        { value: "6", label: "星期六" },
        { value: "7", label: "星期七" },
      ],
      monthList: [],
      customerGroupList: [],
      channelList: [],
      organizationList: [],
      organizationList_props: {
        multiple: false,
        label: "organName",
        value: "organCode",
        children: "childOrganList",
        checkStrictly: true,
      },
      // 总体遮罩层
      loading: false,
      formRules: {
        policyType: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        strategyName: [
          { required: true, message: "请输入策略名称", trigger: "blur" },
        ],
        customerGroup: [
          { required: true, message: "请选择客群", trigger: "change" },
        ],
        strategyChannelCode: [
          { required: true, message: "请选择渠道", trigger: "change" },
        ],
      },
      strategyOrgan: [],
      strategyOrgan2: [],
      strategyBaseForm: {
        policyType: ["1"],
        strategyOrganId: "",
        strategyOrganName: "",
        value1: "",
        value2: "",
        value3: "",
        value7: "",
        value8: "1",
        value9: "",
        value10: "1",
        value11: "1",
        value12: "1",
        week: "",
        month: "",
      },
      operationType: "",
    };
  },
  created() {
    this.operationType = this.$route.query.type;
    this.getEnumList();
    if (JSON.stringify(this.strategyBaseFormCopy) !== "{}") {
      this.strategyBaseForm = this.strategyBaseFormCopy;
      // this.getParentId(this.organizationList,this.strategyBaseForm.strategyOrganId)
    }
    //生成月list
    this.monthList = [];
    for (let index = 0; index < 31; index++) {
      this.monthList.push({
        value: index + 1,
        label: index + 1 + "号",
      });
    }
  },
  methods: {
    strategyOrganChange(val) {
      if (val.length !== 0) {
        this.strategyBaseForm.strategyOrganId = val[val.length - 1];
        // 863301浙江分公司本部
        this.strategyOrgan2 = this.getParentId(
          this.organizationList,
          val[val.length - 1]
        ).reverse();
      } else {
        this.strategyBaseForm.strategyOrganId = "";
        this.strategyBaseForm.strategyOrganName = "";
      }
      console.log(val, this.strategyOrgan);
    },
    getParentId(list, id) {
      for (let i in list) {
        if (list[i].organCode === id) {
          this.strategyBaseForm.strategyOrganName = list[i].organName;
          return [list[i].organCode];
        }
        if (list[i].childOrganList != null) {
          let node = this.getParentId(list[i].childOrganList, id);
          if (node !== undefined) {
            return node.concat(list[i].organCode);
          }
        }
      }
    },
    policyTypeChange(val) {
      if (val.length > 1) {
        const type = val[val.length - 1];
        this.strategyBaseForm.policyType = [type];
      }
    },
    async getEnumList() {
      try {
        const response = await axios.post(
          process.env.VUE_APP_BASE_API + "/strategy/queryEnumList",
          {}
        );
        if (response.data.enumList) {
          if (response.data.enumList.customerGroup) {
            this.customerGroupList = response.data.enumList.customerGroup;
          }
          if (response.data.enumList.channelType) {
            this.channelList = response.data.enumList.channelType;
          }
          if (response.data.enumList.organList) {
            this.organizationList = JSON.parse(
              response.data.enumList.organList
            );
            if (
              JSON.stringify(this.strategyBaseFormCopy) !== "{}" &&
              this.strategyBaseFormCopy.strategyOrganId.length !== 0
            ) {
              this.strategyOrgan = this.getParentId(
                this.organizationList,
                this.strategyBaseFormCopy.strategyOrganId
              ).reverse();
              // this.strategyOrgan = this.getParentId(this.organizationList, '863301').reverse()
            }
          }
        }
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    },
    getForm() {
      console.log(this.strategyBaseForm);
      if (this.strategyOrgan.length == 0) {
        return this.$message.warning("机构不可为空");
      }
      return this.strategyBaseForm;
      // this.$refs.formObject.validate((valid) => {
      //   if (valid) {
      //     return this.strategyBaseForm;
      //   } else {
      //     return false;
      //   }
      // });

      // if (this.strategyOrgan.length == 0) {
      //   return this.$message.warning('机构不可为空')
      // }
      // this.$refs.formObject.validate((valid) => {
      //   if (valid) {
      //     return this.strategyBaseForm
      //   } else {
      //     return false
      //   }
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
.inputdiv ::v-deep .el-input__inner {
  width: 80px !important;
}
.frequency_set_box {
  width: 420px;
  padding: 10px;
  background-color: #eee;
}
</style>
